.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.homeBgImg {
  z-index: 0;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.0, 1.0);
  animation: animate 20s linear infinite;
  animation-direction: alternate;
  transition: all 0.2s ease-in-out;
}

/* https://github.com/hanumancode/Background-Image-Animation-CSS3/blob/master/style.css */
/* .wrapper::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
}

.wrapper::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.0, 1.0);
  background-color: #f5f5d5;
  background-image: var(--home-background);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  animation: animate 20s linear infinite;
  animation-direction: alternate;
  transition: all 0.2s ease-in-out;
  z-index: -2;
} */

@keyframes animate {
  0% {
    transform: scale(1.5)
  }

  100% {
    transform: scale(1)
  }
}

.container {
  color: #fff;
  width: 85%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.8em;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  user-select: none;
}

.header {
  font-size: 20px;
  text-align: center;
  text-shadow: 0 1px 1px #333;
}

.content {
  font-size: 16px;
}

.content p {
  line-height: 180%;
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 1px #333;
  border-radius: 0.5em;
  padding: 0.5em;
  box-sizing: border-box;
}

.content p svg {
  margin-right: 5px;
  vertical-align: middle !important;
}

.content p:hover, .content p:active, .content p:focus {
  color: #333;
  background-color: #fff;
}